<template>
  <div class="mobil">
    <!-- 首页手机的轮播图 -->
    <div class="qqqqq">
      <swiper
        class="index_mobilde_swiper"
        v-if="header_swiper.length>1"
        @slideChangeTransitionEnd="slideChangeTransitionEnd"
        ref="obanner"
        :options="index_Swiper_one"
      >
        <swiper-slide v-for="(item,index) in header_swiper" :key="index">
          <img :src="item.src" alt />
        </swiper-slide>
      </swiper>
      <div class="im_swiper-pagination">
        <div
          :class="['im_swiper-pagination_item',changebannernavindex == index ? 'im_swiper-pagination_item_i':'']"
          v-for="(item,index) in page"
          :key="index"
        ></div>
      </div>
    </div>
    <!-- 我们能做什么手机 -->
    <div class="mCan">
      <div class="mcan_top">
        <h2>我们能做什么</h2>
        <p>我们以商业落地为基准，为您提供以下服务</p>
      </div>
      <div class="mcan_bot">
        <div class="mContent">
          <div class="wzjs" @click="toser(1)">
            <div class="wzjs_pic">
              <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/change/000.png" alt />
            </div>
            <div class="wzjs_right">
              <div class="wzjs_right_name">
                <span>品牌网站建设</span>
                <span>Website Building</span>
              </div>
              <ul>
                <li>
                  <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homeM/true01-2.png" alt />
                  <span>原创设计企业型</span>
                </li>
                <li>
                  <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homeM/true01-2.png" alt />
                  <span>电子商务营销型</span>
                </li>
                <li>
                  <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homeM/true01-2.png" alt />
                  <span>行业门户平台型</span>
                </li>
                <li>
                  <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homeM/true01-2.png" alt />
                  <span>功能需求定制型</span>
                </li>
              </ul>
              <div class="jt">
                <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homeM/jt01-2.png" alt />
              </div>
            </div>
          </div>
          <!-- 微信定制开发 -->
          <div class="wxdz" @click="toser(2)">
            <div class="wxdz_pic">
              <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconf/app01.png" alt />
            </div>
            <div class="wxdz_right">
              <div class="wxdz_right_name">
                <span>
                  微信定制开发
                  <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homeM/hot01-2.png" alt />
                </span>
                <span>WeChat Custom Development</span>
              </div>
              <ul>
                <li>
                  <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homeM/true01-2.png" alt />
                  <span>小程序开发</span>
                </li>
                <li>
                  <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homeM/true01-2.png" alt />
                  <span>公众号开发</span>
                </li>
                <li>
                  <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homeM/true01-2.png" alt />
                  <span>微信商城系统</span>
                </li>
                <li>
                  <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homeM/true01-2.png" alt />
                  <span>微活动策划</span>
                </li>
              </ul>
              <div class="jt">
                <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homeM/jt01-2.png" alt />
              </div>
            </div>
          </div>
          <!-- app定制开发 -->
          <div class="app" @click="toser(3)">
            <div class="app_pic">
              <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconf/111.png" alt />
            </div>
            <div class="app_right">
              <div class="app_right_name">
                <span>APP定制开发</span>
                <span>WeChat Custom Development</span>
              </div>
              <ul>
                <li>
                  <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homeM/true01-2.png" alt />
                  <span>APP原生开发</span>
                </li>
                <li>
                  <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homeM/true01-2.png" alt />
                  <span>APP混合开发</span>
                </li>
                <li>
                  <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homeM/true01-2.png" alt />
                  <span>WebApp开发</span>
                </li>
              </ul>
              <div class="jt">
                <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homeM/jt01-2.png" alt />
              </div>
            </div>
          </div>
          <!-- vr全景营销 -->
          <div class="vr" @click="toser(4)">
            <div class="vr_pic">
              <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/change/333.png" alt />
            </div>
            <div class="vr_right">
              <div class="vr_right_name">
                <span>VR全景营销</span>
                <span>Virtual Panorama</span>
              </div>
              <ul>
                <li>
                  <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homeM/true01-2.png" alt />
                  <span>720°全景定制</span>
                </li>
                <li>
                  <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homeM/true01-2.png" alt />
                  <span>360°环绕拍摄</span>
                </li>
                <li>
                  <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homeM/true01-2.png" alt />
                  <span>VR智慧展馆</span>
                </li>
                <li>
                  <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homeM/true01-2.png" alt />
                  <span>Web 3D开发</span>
                </li>
              </ul>
              <div class="jt">
                <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homeM/jt01-2.png" alt />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 提升品牌价值 -->
    <div class="mbrand clearfix">
      <div class="mbrand_top">
        <h2>只为用户提升品牌价值</h2>
        <p>我们的用户正在使用科技改变世界</p>
      </div>
      <ul>
        <li @click="toexa(3)">
          <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/change/21.png" alt />
          <div class="wz">
            <span>多威商城定制</span>
            <span>|</span>
            <span>公众号</span>
          </div>
        </li>
        <li @click="toexa(8)">
          <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/change/22.png" alt />
          <div class="wz">
            <span>一块跑APP定制</span>
            <span>|</span>
            <span>APP开发</span>
          </div>
        </li>
        <li @click="toexa(7)">
          <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/change/23.png" alt />
          <div class="wz">
            <span>亿丁狗商城定制</span>
            <span>|</span>
            <span>小程序开发</span>
          </div>
        </li>
      </ul>
      <div class="more" @click="toexample">
        <span>查看更多</span>
        <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homeM/tz01-2.png" alt />
      </div>
    </div>
    <!-- 将想法与焦点与您一起共享 -->
    <div class="mPublic clearfix">
      <div class="mPublic_top">
        <h2>将想法与焦点与您一起共享</h2>
        <p>随时随地与您分享互联网行业信息</p>
      </div>
      <div class="mBanner_bot">
        <swiper :options="swip_idea" 
          v-if="newslist.length>1"
           @slideChangeTransitionEnd="slideChange"
          ref="mySwiperhome">
          <swiper-slide v-for="(item,index) in newslist" :key="index">
            <div class="mbanner_con">
              <div class="pic pic_o">
                <img :src="item.cover" alt />
              </div>
              <div class="bot" @click="tonews(item.id)">
                <span>{{item.title}}</span>
                <span>{{item.create_time}}</span>
                <div class="bot_contant">
                  <p v-html="item.content"></p>
                </div>
              </div>
            </div>
          </swiper-slide>
        </swiper>
        <div class="mBanner_bot_pa">
          <div :class="['zero',changebannerindex == index ? 'zero_item': '']" 
          v-for="(item,index) in newslist" :key="index"></div>
        </div>
      </div>
      <!-- 查看更多 -->
      <div class="ideamore" @click="toidea" >
        <span>查看更多</span>
        <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/homeM/tz01-2.png" alt />
      </div>
    </div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      // 首页新闻数据
      newslist: [],
      changebannernavindex: 0,
      changebannerindex:0,
      page: ["1", "2", "3"],
      header_swiper: [],
      index_Swiper_one: {
        direction: "horizontal",
        loop: true,
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true,
        autoplay: {
          delay: 1000,
          disableOnInteraction: false
        }
      },
        swip_idea: {
        direction: "horizontal",
        loop: true,
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false
        }
      }
    };
  },
  mounted() {
    // console.log(this.newslist)
    this.getnewsData();
    this.getData();
  },
  methods: {
    slideChangeTransitionEnd() {
      let swiper = this.$refs.obanner.swiper;
      // window.console.log(swiper.realIndex);
      this.changebannernavindex = swiper.realIndex;
    },
     slideChange() {
      let swiper = this.$refs.mySwiperhome.swiper;
      // window.console.log(swiper.realIndex);
      this.changebannerindex = swiper.realIndex;
    },
    // 首页新闻数据的获取
    getnewsData() {
      this.list = [];
      this.ajaxs("index/getNews", {
        data: { page: 1, state: 0 },
        success: res => {
          this.newslist = res.msg.data;
          this.newslist = this.newslist.splice(0, 3);
          console.log(this.newslist);
        }
      });
    },
    tonews(key) {
      // console.log(key)
      this.$router.push("/index/news/detail/" + key);
    },
    getData() {
      this.ajaxs("index/index", {
        success: res => {
          this.banner = res.msg;
          // console.log(res.msg.index.mobile);
          this.header_swiper = res.msg.index.mobile;
          // this.banner_info = this.banner[this.$route.name]
          // if (this.banner_info == undefined) {
          //   this.banner_info = {
          //     mobile: { src: 'https://jingye.oss-cn-qingdao.aliyuncs.com/serv-top.png' },
          //     pc: { src: 'https://jingye.oss-cn-qingdao.aliyuncs.com/serv-top.png' }
          //   }
          // }
          // console.log(this.banner_info)
        }
      });
    },
    toidea () {
          this.$router.push("/index/news/index");
    },
       // 手机端跳转到案例
    toexa(key) {
      switch (key) {
        case 3:
          this.$router.push("/index/example/detail/" + 3);
          break;
        case 8:
          this.$router.push("/index/example/detail/" + 8);
          break;
        case 7:
          this.$router.push("/index/example/detail/" + 7);
          break;
        default:
          break;
      }
    },
       // 跳转到案例
    toexample() {
      this.$router.push("/index/example/index");
      // console.log(111)
    },
  }
};
</script>

<style lang="less" scoped>
@import url("../../assets/css/index/mIndex.css");
</style>